import { defineComponent, h, PropType, toRefs } from "vue";
import "uno.css";

export type Size = "small" | "medium" | "large";
export type Color = 'black' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink'
// 类型断言const = 当前所定义的数据都是readonly, 只读不能修改
export const props = {
    color: {
        type: String as PropType<Color>,
        default: 'blue'  // 设定默认颜色
    },
    size: {
        type: String as PropType<Size>,
        default: "medium",
    },
    round: {
        type: Boolean,
        default: false,
    },
    plain: {
        type: Boolean,
        default: false,
    },
    icon: {
        type: String,
        default: "",
    },
} as const


export default defineComponent({
    name: 'BasicComponents',
    // vue3默认的包不支持模板编译功能, vue3中编译功能推荐在构建阶段完成，而不是放到浏览器中运行。如果希望在浏览器中的话，可以选择 ./node_modules/vue/dist/vue.global.js 这个包
    // template:'<button>MyButton</button>',
    // render() {
    //     return h('button', null, '我是基础组件')
    // }
    props,
    setup(props, { slots }) {
        const size = {
            small: {
                x: "2",
                y: "1",
                text: "sm",
            },
            medium: {
                x: "3",
                y: "1.5",
                text: "base",
            },
            large: {
                x: "4",
                y: "2",
                text: "lg",
            }
        };
        return () => <button
            class={`
                py-${size[props.size].y}
                px-${size[props.size].x}
                ${props.round ? "rounded-full" : "rounded-lg"}
                bg-${props.color}-${props.plain ? "100" : "500"}
                hover:bg-${props.color}-400
                border-${props.color}-${props.plain ? "500" : "500"}
                cursor-pointer
                border-solid
                text-${props.plain ? props.color + "-500" : "white"}
                text-${size[props.size].text}
                hover:text-white
                transition duration-300 ease-in-out transform hover:scale-105
                mx-1
            `}
        >
            { props.icon !== "" ? <i class={`i-ic-baseline-${props.icon} p-3`}></i> : ""}
            {slots.default ? slots.default() : '基础组件'}
        </button>
    }
})